<template>
  <div>
    <input type="text" v-focus />

    <button v-if="counter < 2" v-why.aaa.bbb="'coderwhy'" @click="increment">
      当前计数: {{ counter }}
    </button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const counter = ref(0);

    const increment = () => counter.value++;
    return { counter, increment };
  },

  // 局部指令
  directives: {
    why: {
      created(el, bindings, vnode, preVnode) {
        console.log("why created", el, bindings, vnode, preVnode);
        console.log(bindings.value);
        console.log(bindings.modifiers);
      },
      beforeMount() {
        console.log("why beforeMount");
      },
      mounted() {
        console.log("why mounted");
      },
      beforeUpdate() {
        console.log("why beforeUpdate");
      },
      update() {
        console.log("why update");
      },
      beforeUnmount() {
        console.log("why beforeUnmount");
      },
      unmounted() {
        console.log("why unmounted");
      },
    },
  },
};
</script>

<style scoped></style>
